import React from 'react';
import { Card, Badge, Progress, Tag, Tooltip } from 'antd';
import { 
  ArrowUpOutlined, 
  ArrowDownOutlined, 
  PauseOutlined,
  WarningOutlined,
  ToolOutlined
} from '@ant-design/icons';

interface ElevatorStatusCardProps {
  elevator: {
    id: string;
    name: string;
    status: 'running' | 'idle' | 'maintenance' | 'fault';
    direction: 'up' | 'down' | 'idle';
    currentFloor: number;
    targetFloor?: number;
    load: number;
    maxLoad: number;
    lastUpdate: string;
  };
  onClick?: () => void;
}

const ElevatorStatusCard: React.FC<ElevatorStatusCardProps> = ({ elevator, onClick }) => {
  // 状态配置
  const statusConfig = {
    running: { color: 'green', text: '运行中', icon: <Badge status="processing" /> },
    idle: { color: 'blue', text: '空闲', icon: <Badge status="default" /> },
    maintenance: { color: 'orange', text: '维护中', icon: <Badge status="warning" /> },
    fault: { color: 'red', text: '故障', icon: <Badge status="error" /> }
  };

  // 方向图标
  const directionIcon = {
    up: <ArrowUpOutlined style={{ color: '#52c41a' }} />,
    down: <ArrowDownOutlined style={{ color: '#1890ff' }} />,
    idle: <PauseOutlined style={{ color: '#666' }} />
  };

  // 负载百分比
  const loadPercentage = (elevator.load / elevator.maxLoad) * 100;
  
  // 负载颜色
  const getLoadColor = (percentage: number) => {
    if (percentage >= 90) return '#ff4d4f';
    if (percentage >= 70) return '#faad14';
    return '#52c41a';
  };

  return (
    <Card
      hoverable
      onClick={onClick}
      style={{ 
        height: '100%',
        cursor: onClick ? 'pointer' : 'default'
      }}
      styles={{ body: { padding: '16px' } }}
    >
      {/* 头部信息 */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center', marginBottom: 12 }}>
        <div>
          <h4 style={{ margin: 0, fontSize: '16px' }}>{elevator.name}</h4>
          <span style={{ fontSize: '12px', color: '#666' }}>ID: {elevator.id}</span>
        </div>
        <div style={{ textAlign: 'right' }}>
          {statusConfig[elevator.status].icon}
          <Tag color={statusConfig[elevator.status].color} style={{ marginLeft: 4 }}>
            {statusConfig[elevator.status].text}
          </Tag>
        </div>
      </div>

      {/* 楼层信息 */}
      <div style={{ 
        display: 'flex', 
        alignItems: 'center', 
        justifyContent: 'center',
        padding: '12px 0',
        backgroundColor: '#f5f5f5',
        borderRadius: '6px',
        marginBottom: 12
      }}>
        <div style={{ textAlign: 'center' }}>
          <div style={{ fontSize: '24px', fontWeight: 'bold', marginBottom: 4 }}>
            {elevator.currentFloor}F
          </div>
          <div style={{ fontSize: '12px', color: '#666', display: 'flex', alignItems: 'center', justifyContent: 'center' }}>
            {directionIcon[elevator.direction]}
            <span style={{ marginLeft: 4 }}>
              {elevator.direction === 'idle' ? '停止' : 
               elevator.direction === 'up' ? '上行' : '下行'}
            </span>
            {elevator.targetFloor && elevator.direction !== 'idle' && (
              <span style={{ marginLeft: 4 }}>→ {elevator.targetFloor}F</span>
            )}
          </div>
        </div>
      </div>

      {/* 负载信息 */}
      <div style={{ marginBottom: 12 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', marginBottom: 4 }}>
          <span style={{ fontSize: '12px', color: '#666' }}>负载</span>
          <span style={{ fontSize: '12px' }}>
            {elevator.load}kg / {elevator.maxLoad}kg
          </span>
        </div>
        <Progress
          percent={loadPercentage}
          size="small"
          strokeColor={getLoadColor(loadPercentage)}
          format={() => `${Math.round(loadPercentage)}%`}
        />
      </div>

      {/* 状态指示器 */}
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
        <div style={{ fontSize: '12px', color: '#666' }}>
          更新: {new Date(elevator.lastUpdate).toLocaleTimeString()}
        </div>
        <div>
          {elevator.status === 'fault' && (
            <Tooltip title="设备故障">
              <WarningOutlined style={{ color: '#ff4d4f', marginRight: 4 }} />
            </Tooltip>
          )}
          {elevator.status === 'maintenance' && (
            <Tooltip title="维护模式">
              <ToolOutlined style={{ color: '#faad14' }} />
            </Tooltip>
          )}
        </div>
      </div>
    </Card>
  );
};

export default ElevatorStatusCard;